<template>
  <div class="main">
    <nav-bar class="nav"><div slot="center" class="nav_title">个人信息</div></nav-bar>
    <about @click.native="login" class="about" :background-color="['#42B983','skyblue']" :name="userInfo.username" :tel="userInfo.tel" imgUrl="assets/logo.png"></about>
    <tab class="tab"></tab>
  </div>
</template>

<script>
  import navBar from 'components/common/navBar/navBar.vue'
  import about from './components/about.vue'
  import tab from './components/tab.vue'
  export default{
    name:'',
    data(){
      return {
        userInfo:{}
      }
    },
    computed:{

    },
    methods:{
      login(){
        console.log(this.userInfo);
        if(!window.sessionStorage.user){
          this.$router.push('/login')
        }
        else{
          console.log('logined');
        }
      }
    },
    components:{
      navBar,about,tab
    },
    activated() {
      // console.log(JSON.parse(window.sessionStorage.store));
      if(window.sessionStorage.user){
        let save=window.sessionStorage.user
        let json = (new Function("return " + save))();
        this.userInfo= json
        console.log(this.userInfo);

      }
    }
  }
</script>

<style scoped>
  .main{
    background-color: #d9d9d9;
    z-index: -2;
    height: 100vh;
  }
  .nav{
    background-color: var(--color-tint);
    color: white;
    height: 44px;
    font-size: 16px;
    line-height: 44px;
  }
  .nav_title{
    margin: 0 auto;
  }
  .about{
    height: 20vh;
    box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
  .tab{
    width: 95%;
    margin: 10px auto;
    z-index: 10;
    background-color: whitesmoke;
    box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
</style>
